<template>
<div style="border-spacing: 10px">

  <strong style="font-size: 20px;" ></strong>
  <div style="text-align: center"><strong style="font-size: 20px;margin: auto" >我的购物车</strong></div>
<br>
  <div style="text-align: center"><strong style="font-size: 20px;margin: auto" ></strong></div>


  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;margin-top: 10px"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>

    <el-table-column
        label="">
      <template  slot-scope="scope">
        <el-image
            preview
            :src="'http://localhost:8080/GameStore/images/'+scope.row.game.gameImg"
            style="border-radius:8px;width: 80px;height: 80px"
        ></el-image>
      </template>
    </el-table-column>

    <el-table-column
        label="游戏名称">
        <template slot-scope="scope">
          {{scope.row.game.gameName}}
        </template>
    </el-table-column>
    <el-table-column
        label="游戏类型">
      <template slot-scope="scope">
        {{scope.row.game.gameType}}
      </template>
    </el-table-column>

    <el-table-column
        prop="game.price"
        label="价格"
        width="180">
      <template slot-scope="scope">
        ¥{{scope.row.game.price}}
      </template>
    </el-table-column>
    <el-table-column type="expand" style="width:20px">
      <template slot-scope="props">

        <el-row :gutter="20">
          <el-col :span="8">
            <div>
              <el-statistic group-separator="," :precision="2"  title="评分">

              </el-statistic>
              <el-rate
                  style="text-align: center"
                  v-model="value"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
              </el-rate>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-statistic  title="销量">
                <template slot="formatter">
                  {{props.row.game.saleCount}}
                </template>

              </el-statistic>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-statistic  title="年满16周岁">
                <template slot="formatter">
                  16+
                </template>

              </el-statistic>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>


        <el-row :gutter="20">
          <el-col :span="15">
            <div>
              <div style="text-align: center"><strong style="font-size: 15px;text-align: center" >详情图片</strong></div>
              <br>
              <div style="height: 300px;width: 500px;text-align: center;margin: auto">
                <el-carousel height="300px" width="300px" >
                  <el-carousel-item v-for="item in props.row.game.detailGameImg" :key="item">
                    <el-image
                        preview
                        :src="'http://localhost:8080/GameStore/images/'+item"
                        style="border-radius:8px;width: 500px;height: 300px"
                    ></el-image>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <div ><strong style="font-size: 15px" >游戏介绍</strong></div>
              <br>
              <div style="text-align:left;margin-right: 50px">{{props.row.game.description}}</div>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </template>
    </el-table-column>
    <el-table-column
        label=""
        style="width: 2px">
      详情
    </el-table-column>
    <el-table-column
        align="right">
      <template slot="header" slot-scope="scope">
        <el-input
            v-model="search"
            placeholder="输入关键字搜索">
          <el-button @click="searchfor" slot="append" icon="el-icon-search" style="float: left"></el-button>
        </el-input>
      </template>
      <template slot-scope="scope">

        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">移出购物车</el-button>
      </template>
    </el-table-column>

  </el-table>
  <div style="margin-top: 20px">
    <div style="float: right;margin-right: 20px">合计: ¥{{this.sum}}</div>
    <br><br><br>
    <el-button :offet="1" style="float: right;width: 100px;margin-left: 5px" type="primary" @click="jiesuan">结算</el-button>
    <el-button :span="6" style="float: right;width: 100px;margin-left: 5px" @click="deletecart">清空购物车</el-button>
  </div>

  <!--确认订单对话框-->
  <el-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1000px"
      :before-close="handleClose">
    <div>
      <div style="text-align: center"><strong style="font-size: 20px;margin: auto" >确认订单</strong></div>
      <el-table
          :data="multipleSelection"
          style="width: 100%">
        <el-table-column
            label=""
        >
          <template  slot-scope="scope">
            <el-image
                preview
                :src="'http://localhost:8080/GameStore/images/'+scope.row.game.gameImg"
                style="border-radius:8px;width: 80px;height: 80px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
            label="游戏名称">
          <template slot-scope="scope">
            {{scope.row.game.gameName}}
          </template>
        </el-table-column>
        <el-table-column
            label="游戏类型">
          <template slot-scope="scope">
            {{scope.row.game.gameType}}
          </template>
        </el-table-column>

        <el-table-column
            prop="game.price"
            label="价格"
            width="180">
          <template slot-scope="scope">
            ¥{{scope.row.game.price}}
          </template>
        </el-table-column>
        <el-table-column type="expand" style="width:20px">
          <template slot-scope="props">

            <el-row :gutter="20">
              <el-col :span="8">
                <div>
                  <el-statistic group-separator="," :precision="2"  title="评分">

                  </el-statistic>
                  <el-rate
                      style="text-align: center"
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                  </el-rate>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-statistic  title="销量">
                    <template slot="formatter">
                      {{props.row.game.saleCount}}
                    </template>

                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-statistic  title="年满16周岁">
                    <template slot="formatter">
                      16+
                    </template>

                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>


            <el-row :gutter="20">
              <el-col :span="15">
                <div>
                  <div style="text-align: center"><strong style="font-size: 15px;text-align: center" >详情图片</strong></div>
                  <div style="height: 300px;width: 500px;text-align: center;margin: auto">
                    <el-carousel height="300px" width="300px" >
                      <el-carousel-item v-for="item in props.row.game.detailGameImg" :key="item">
                        <el-image
                            preview
                            :src="'http://localhost:8080/GameStore/images/'+item"
                            style="width: 500px;height: 300px;border-radius: 8px"
                        ></el-image>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <div ><strong style="font-size: 15px" >游戏介绍</strong></div>
                  <br>
                  <div style="text-align:left;margin-right: 50px">{{props.row.game.description}}</div>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </template>
        </el-table-column>
        <el-table-column
            label=""
            style="width: 2px">
          详情
        </el-table-column>

      </el-table>

      <div style="text-align: center">
        <br>
        <div style="float: right;margin-right: 20px">合计:¥{{this.sum}}元</div><br>
        <strong style="font-size: 20px;" >选择支付方式</strong>
        <strong style="font-size: 20px;" ><br></strong>
        <strong style="font-size: 20px;" ><br></strong>
        <el-radio-group v-model="radio1" fill="#EBEEF5">
          <el-radio-button label="北京"  >
            <el-image
                style="margin:fill;width: 80px; height: 60px"
                :src="require('@/assets/支付平台-支付宝.png')">
              <!--                  style="width: 80px; height: 80px"-->
            </el-image>
          </el-radio-button>
        </el-radio-group>
        <br><br><br>
        <el-button type="primary" @click="pay">支付</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>

    </div>
  </el-dialog>

</div>
</template>

<script>
import qs from 'qs'
export default {
  name: "cart",
  data() {
    return {
      search:'',
      value:3.7,
      orderId:0,
      sum:0,
      i:0,
      sum1:0,
      radio1:-1,
      dialogVisible:false,
      gameList:{
        userId:+sessionStorage.getItem('userId'),
        gameList:[]
      },
      deleteData:{
        userId:+sessionStorage.getItem('userId'),
        itemIds:[]
      },
      totalPrice:0,
      tableData: [],
      multipleSelection: []
    }
},
  created(){
    this.getCart();
  },
  methods: {
    searchfor(){
     this.tableData = this.tableData.filter(data => !this.search || data.game.gameName.toLowerCase().includes(this.search.toLowerCase()));
     this.search='';
    },
    getCart(){
      this.sum=0;
      this.sum1=0;
      this.tableData=[];
      this.$axios.get('/user/cart/'+this.gameList.userId).then(res => {
          this.tableData=res.data.cartItemList
        for(this.i=0;this.i<this.tableData.length;this.i++){
          this.sum1= this.sum1+this.tableData[this.i].game.price;
        }
        this.sum=this.sum1
      })
    },
    jiesuan(){
      if(this.multipleSelection.length===0){
        this.$message({
          showClose: true,
          message: '请先选择游戏',
          type: 'error',
        });
      }else{

      //  确认订单
        this.gameList.gameList=[];
        for(this.i=0;this.i<this.multipleSelection.length;this.i++){
          this.gameList.gameList.push(this.multipleSelection[this.i].game.gameId)
        }
        this.$axios.post('/order/confirm' ,this.gameList)
            .then(res => {
              if(res.data.status === 200) {
                this.dialogVisible=true
                this.orderId=res.data.orderId
              }
            })
      }
    },
    resetForm(formName) {
      this.game=[{}]
      this.dialogVisible = false
    },
    handleClose() {
      this.resetForm();
    },
    pay(){
      if(this.radio1 === -1){
        this.$message({
          showClose: true,
          message: '请选择支付方式',
          type: 'error',
        });
        return false
      }

      this.$axios.post('/pay' ,{orderId:this.orderId} )
          .then(res => {
            if(res.data.status === 200) {
              document.querySelector('body').innerHTML = res.data.pageContent;
              document.forms[0].submit();
              this.dialogVisible=false
              this.getCart()
            }
            this.gameList.gameList=[];
          })
    },
deletecart(){
  this.$axios.post('/cart/delete/all',{userId:+sessionStorage.getItem('userId')}).then(res => {
    if(res.data.status === 200) {
      this.$message({
        showClose: true,
        message: '清空购物车成功',
        type: 'success',
      });
      this.getCart()
      this.sum=0
      this.sum1=0
    }
    this.deleteData.itemIds=[];
  })
},
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.deleteData.itemIds=[];
      this.deleteData.itemIds.push(row.cartItemId)
      this.$axios.post('/cart/delete',{userId:+sessionStorage.getItem('userId'),cartItemIds:this.deleteData.itemIds}).then(res => {
        if(res.data.status === 200) {
          this.$message({
            showClose: true,
            message: '移除成功',
            type: 'success',
          });
          this.sum=0
          this.sum1=0
          this.getCart()
        }
        this.deleteData.itemIds=[];
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.sum=0;
      for(this.i=0;this.i<this.multipleSelection.length;this.i++){
        this.sum= this.sum+this.multipleSelection[this.i].game.price;
      }
    }
  }

}
</script>

<style scoped>

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>